<template>
  <layout viewName="装配过程记录" :isControl="true" :tableData="tableData" :workStep="workStep">
    <div class="control" v-loading="getTableLoading">
      <controlContent ref="controlContent" headName="生产领用配套单">
        <template #btn>
          <el-button type="primary" plain @click="save(1)">保存</el-button>
        </template>
        <controlTable
          ref="table1"
          :tableHeight="tableHeight"
          v-if="tableHeight && !getTableLoading"
          :tableData="tableData.packageList"
          :tableInputs="tableData.packageInputs"
        ></controlTable>
      </controlContent>
      <controlContent headName="装配过程质量保证单">
        <template #btn>
          <el-button type="primary" plain @click="save(2)">保存</el-button>
        </template>
        <controlTable
          ref="table2"
          :tableHeight="tableHeight"
          v-if="tableHeight && !getTableLoading"
          :tableData="tableData.qualityList"
          :tableInputs="tableData.qualityInputs"
        ></controlTable>
      </controlContent>
      <controlContent headName="装配工艺流水卡片">
        <template #btn>
          <el-button type="primary" plain @click="save(3)">保存</el-button>
        </template>
        <controlTable
          ref="table3"
          :tableHeight="tableHeight"
          v-if="tableHeight && !getTableLoading"
          :tableData="tableData.turnoverList"
          :tableInputs="tableData.turnoverInputs"
        ></controlTable>
      </controlContent>
      <controlContent headName="工序质量问题汇总" v-loading="IssuesLoading">
        <template #btn>
          <el-button type="primary" plain @click="handleFormBtnClick">添加工序质量记录</el-button>
        </template>
        <controlTable
          ref="table4"
          isTableInput
          @handleBtnClick="handleBtnClick"
          :tableHeight="tableHeight"
          v-if="!IssuesLoading"
          :tableData="Issues"
          :tableColumn="tableColumn_issues"
        ></controlTable>
      </controlContent>
      <RoleFormDialog ref="roleFormDialog" @submit="getIssues"></RoleFormDialog>
    </div>
  </layout>
</template>

<script>
import layout from '../layout/index.vue';
import controlContent from './content.vue';
import controlTable from './table';
import threeLocal from '../threeLocal';
import storage from 'js-storage';
import request from '../../../api/http';
import RoleFormDialog from './RoleFormDialog';

export default {
  mixins: [threeLocal],
  components: { layout, controlContent, controlTable, RoleFormDialog },
  data() {
    return {
      tableHeight: 300,
      Issues: [],
      IssuesLoading: true,
      tableColumn_issues: [
        {
          label: '序号',
          type: 'index',
        },
        {
          label: '产品件号',
          prop: 'produt_num',
        },
        {
          label: '产品名称',
          prop: 'product_name',
        },
        {
          label: '产品批号',
          prop: 'product_patch_num',
        },
        {
          label: '问题内容',
          prop: 'content',
        },
        {
          label: '时间',
          prop: 'date_view',
        },
        {
          label: '责任人',
          prop: 'user_name',
        },
        {
          label: '操作',
          type: 'operation',
          btns: [
            {
              key: 'edit',
              label: '编辑',
            },
          ],
        },
      ],
    };
  },
  watch: {
    workStep: {
      handler(newVal, oldVal) {
        this.getIssues();
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.getTableHeight();
  },
  methods: {
    async init() {
      await this.getData();
      this.getIssues();
    },
    getTableHeight() {
      const controlContent = this.$refs.controlContent && this.$refs.controlContent.$el;
      this.tableHeight = controlContent.offsetHeight - this.$refs.controlContent.controlContentHead.offsetHeight - 5;
    },
    // 保存
    save(type) {
      this.getTableLoading = true;
      request
        .post(`/output/api/custom/craft/${this.taskId}/${type}`, this.$refs[`table${type}`].tableData_view)
        .then(res => {
          if (res.data.code === 200) {
            this.getData();
            this.$message.success('保存成功！');
          } else {
            this.$message.success(`保存失败！${res.data.message}`);
          }
        });
    },
    // 获取某个基础工艺中某个工序号下的所有的质量问题
    getIssues() {
      this.IssuesLoading = true;
      console.log(this.tableData.standard_num, this.workStep.processNo);
      request
        .get(`/output/api/issues/list/${this.tableData.standard_num}/${this.workStep.processNo}?page=1&pageSize=100000`)
        .then(res => {
          // console.log(res.data.data);
          this.Issues = res.data.data;
          this.IssuesLoading = false;
        });
    },
    // 编辑
    handleBtnClick(key, row, rowIndex) {
      if (key === 'edit') {
        this.$refs.roleFormDialog.show('edit', row);
      }
    },
    // 新建
    handleFormBtnClick(params) {
      this.$refs.roleFormDialog.show('add', {
        task_patch_id: this.taskId,
        process_no: this.workStep.processNo,
        standard_num: this.tableData.standard_num,
      });
    },
  },
};
</script>

<style lang="scss">
.control {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .control_content {
    border-right: 1px solid #000;
    border-top: 1px solid #000;
  }
  .control_content:nth-child(1),
  .control_content:nth-child(2) {
    border-top: none;
  }
}
</style>
